Skip to content

frontend: detect and list other vehicles on blueos #3517

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

frontend: detect and list other vehicles on blueos #3517

wants to merge 1 commit into from

Conversation

Williangalvani
Copy link
Member

@Williangalvani Williangalvani commented Aug 30, 2025 •
edited by ES-Alexander
Loading

Helps manage multiple vehicles on the same network. requires that the vehicles are able to see each other

Screen.Recording.2025-08-30.at.18.28.53.mov

Summary by Sourcery

Enable automatic discovery of other vehicles on the local network via mDNS in the backend and add a front-end widget for listing and navigating to those vehicles

New Features:

  • Discover networked vehicles via mDNS in the beacon service and expose them through a /discovered_services API endpoint
  • Add a VehiclePicker Vue component to display and navigate to other detected vehicles
  • Integrate the VehiclePicker into the VehicleBanner UI with updated action buttons

Enhancements:

  • Manage Zeroconf listener lifecycle in the Beacon service to start and stop mDNS discovery

@sourcery-ai Sourcery AI
Copy link

sourcery-ai bot commented Aug 30, 2025 •
edited
Loading

Reviewer's Guide

This PR adds mDNS-based vehicle discovery to the backend beacon service, exposes a new REST endpoint for discovered services, and updates the Vue frontend to display and navigate between detected vehicles via a new picker component.

Sequence diagram for frontend vehicle discovery and navigation

sequenceDiagram
    actor User
    participant VehiclePicker (Vue)
    participant Backend (REST API)
    participant OtherVehicle
    User->>VehiclePicker (Vue): Clicks vehicle picker button
    VehiclePicker->>Backend (REST API): GET /beacon/v1.0/discovered_services
    Backend-->>VehiclePicker: Returns discovered vehicles (IP + names)
    loop For each discovered vehicle
        VehiclePicker->>OtherVehicle: GET /beacon/v1.0/hostname
        OtherVehicle-->>VehiclePicker: Returns hostname
        VehiclePicker->>OtherVehicle: GET /bag/v1.0/get/vehicle.image_path
        OtherVehicle-->>VehiclePicker: Returns image path
    end
    User->>VehiclePicker: Clicks on vehicle IP
    VehiclePicker->>User: Opens vehicle UI in new tab
Loading

Entity relationship diagram for discovered services API response

erDiagram
    VEHICLE {
      string hostname
      string imagePath
      string[] ips
    }
    DISCOVERED_SERVICES {
      string ip
      string[] service_names
    }
    DISCOVERED_SERVICES ||--o| VEHICLE : contains
Loading

Class diagram for BeaconServiceListener and Beacon changes

classDiagram
    class BeaconServiceListener {
      +Dict discovered_services
      +update_service(zc, type_, name)
      +remove_service(zc, type_, name)
      +add_service(zc, type_, name)
      +_process_service(zc, type_, name)
      +get_discovered_services()
    }
    class Beacon {
      +Dict runners
      +Optional zeroconf
      +Optional service_listener
      +Optional service_browser
      +start_zeroconf_listener()
      +stop_zeroconf_listener()
      +get_discovered_services()
      +run()
      +stop()
    }
    Beacon o-- BeaconServiceListener : uses
Loading

Class diagram for VehiclePicker Vue component

classDiagram
    class VehiclePicker {
      +expanded: boolean
      +loading: boolean
      +error: string|null
      +availableVehicles: Vehicle[]
      +toggleDropdown()
      +fetchDiscoveredServices()
      +refreshServices()
      +navigateToVehicle(ip)
      +allMyIps: string[] (computed)
    }
    class Vehicle {
      +ips: string[]
      +hostname: string
      +imagePath: string
    }
    VehiclePicker o-- Vehicle : manages
Loading

File-Level Changes

Change Details Files
Implement mDNS discovery in Beacon service
  • Add BeaconServiceListener class with add/update/remove hooks
  • Integrate Zeroconf listener lifecycle in Beacon (start/stop)
  • Expose get_discovered_services in Beacon and integrate with run/stop loops
 core/services/beacon/main.py
Expose discovered services via HTTP API
  • Add GET /discovered_services endpoint
  • Transform raw service data into IP→service-name mapping
  • Handle name cleaning and grouping by IP
 core/services/beacon/main.py
Embed VehiclePicker in the banner UI
  • Import and register VehiclePicker component
  • Add toggle button and container in VehicleBanner.vue
  • Adjust CSS for hover-triggered action-buttons-container
 core/frontend/src/components/app/VehicleBanner.vue
Create VehiclePicker dropdown component
  • Implement dropdown UI to fetch discovered services
  • Fetch hostnames and optional images via axios per IP
  • Group vehicles, handle loading/error states, and navigation
 core/frontend/src/components/app/VehiclePicker.vue
Tips and commands

Interacting with Sourcery

  • Trigger a new review: Comment @sourcery-ai review on the pull request.
  • Continue discussions: Reply directly to Sourcery's review comments.
  • Generate a GitHub issue from a review comment: Ask Sourcery to create an
    issue from a review comment by replying to it. You can also reply to a
    review comment with @sourcery-ai issue to create an issue from it.
  • Generate a pull request title: Write @sourcery-ai anywhere in the pull
    request title to generate a title at any time. You can also comment
    @sourcery-ai title on the pull request to (re-)generate the title at any time.
  • Generate a pull request summary: Write @sourcery-ai summary anywhere in
    the pull request body to generate a PR summary at any time exactly where you
    want it. You can also comment @sourcery-ai summary on the pull request to
    (re-)generate the summary at any time.
  • Generate reviewer's guide: Comment @sourcery-ai guide on the pull
    request to (re-)generate the reviewer's guide at any time.
  • Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
    pull request to resolve all Sourcery comments. Useful if you've already
    addressed all the comments and don't want to see them anymore.
  • Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
    request to dismiss all existing Sourcery reviews. Especially useful if you
    want to start fresh with a new review - don't forget to comment
    @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

  • Enable or disable review features such as the Sourcery-generated pull request
    summary, the reviewer's guide, and others.
  • Change the review language.
  • Add, remove or edit custom review instructions.
  • Adjust other review settings.

Getting Help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@Williangalvani